import { useRef, useState } from "react";
import styles from "./index.module.less";
import SearchBox from "@/components/SearchBox";
import { SEARCH_COLUMNS, TABS } from "./constant";
import { Space, Tabs } from "antd";
import ListComponent from "./ListComponent";
import { useSelector } from "@/store/hooks";
import { SettingType } from "@/enums";
import { map } from "lodash";

export default () => {
	const [params, setParams] = useState({ product_status: "" });
	const goodsStatusLabels = useSelector(state => state.auth.settingMaps?.[SettingType.GOODS_STATUS_LABEL]);

	const handleSearch = e => {
		if (Object.hasOwn(e, "shop_name")) {
			e.shop_name = e.shop_name?.label;
		}
		setParams(e);
	};

	const items = map(TABS, (item, index) => {
		if (index === 0) {
			return item;
		}
		return {
			...item,
			label: goodsStatusLabels?.find(i => i?.product_status_id == item?.key)?.product_status_name
		};
	});

	return (
		<div className={styles.container}>
			<Tabs
				items={items}
				onChange={e => {
					setParams(t => ({
						...t,
						product_status: e
					}));
				}}
			/>
			<SearchBox columns={SEARCH_COLUMNS} onSearch={handleSearch} />
			<ListComponent params={params} />
		</div>
	);
};
